<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI高考作文分析可视化报告</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts-wordcloud@2.1.0/dist/echarts-wordcloud.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        :root {
            --primary: #3b82f6;
            --secondary: #10b981;
            --accent: #8b5cf6;
            --dark: #1e293b;
            --light: #f8fafc;
            --success: #10b981;
            --warning: #f59e0b;
            --danger: #ef4444;
            --info: #3b82f6;
        }
        
        body {
            font-family: 'Noto Sans SC', 'Noto Serif SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            color: var(--dark);
            line-height: 1.8;
            background-color: #f9fafb;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 1rem;
        }
        
        .hero {
            background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
            color: white;
            padding: 4rem 2rem;
            border-radius: 0.5rem;
            margin-bottom: 2rem;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        }
        
        .hero-title {
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 1rem;
            font-family: 'Noto Serif SC', serif;
        }
        
        .hero-subtitle {
            font-size: 1.25rem;
            opacity: 0.9;
            margin-bottom: 2rem;
        }
        
        .card {
            background: white;
            border-radius: 0.5rem;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
            padding: 1.5rem;
            margin-bottom: 2rem;
            transition: transform 0.2s, box-shadow 0.2s;
        }
        
        .card:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        }
        
        .card-title {
            font-size: 1.5rem;
            font-weight: 600;
            margin-bottom: 1rem;
            color: var(--dark);
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .chart-container {
            width: 100%;
            height: 400px;
            margin: 1rem 0;
        }
        
        .essay-content {
            font-size: 1.1rem;
            line-height: 2;
            padding: 1rem;
            background-color: #f8fafc;
            border-radius: 0.5rem;
            position: relative;
        }
        
        .highlight-good {
            background-color: rgba(16, 185, 129, 0.2);
            padding: 0 2px;
            border-bottom: 2px solid var(--success);
            cursor: pointer;
        }
        
        .highlight-weak {
            background-color: rgba(245, 158, 11, 0.2);
            padding: 0 2px;
            border-bottom: 2px solid var(--warning);
            cursor: pointer;
        }
        
        .highlight-error {
            background-color: rgba(239, 68, 68, 0.2);
            padding: 0 2px;
            border-bottom: 2px solid var(--danger);
            cursor: pointer;
        }
        
        .highlight-rhetoric {
            background-color: rgba(139, 92, 246, 0.2);
            padding: 0 2px;
            border-bottom: 2px solid var(--accent);
            cursor: pointer;
        }
        
        .detail-panel {
            position: fixed;
            top: 0;
            right: 0;
            width: 400px;
            height: 100%;
            background: white;
            box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
            padding: 2rem;
            transform: translateX(100%);
            transition: transform 0.3s ease;
            z-index: 1000;
            overflow-y: auto;
        }
        
        .detail-panel.active {
            transform: translateX(0);
        }
        
        .detail-close {
            position: absolute;
            top: 1rem;
            right: 1rem;
            cursor: pointer;
            font-size: 1.5rem;
            color: var(--dark);
        }
        
        .suggestion-item {
            padding: 0.75rem 1rem;
            margin-bottom: 0.5rem;
            border-radius: 0.25rem;
            background-color: #f8fafc;
            display: flex;
            align-items: flex-start;
            gap: 0.75rem;
        }
        
        .suggestion-item i {
            margin-top: 0.2rem;
            color: var(--primary);
        }
        
        .badge {
            display: inline-block;
            padding: 0.25rem 0.5rem;
            border-radius: 9999px;
            font-size: 0.75rem;
            font-weight: 600;
        }
        
        .badge-primary {
            background-color: rgba(59, 130, 246, 0.1);
            color: var(--primary);
        }
        
        .badge-success {
            background-color: rgba(16, 185, 129, 0.1);
            color: var(--success);
        }
        
        .badge-warning {
            background-color: rgba(245, 158, 11, 0.1);
            color: var(--warning);
        }
        
        .badge-danger {
            background-color: rgba(239, 68, 68, 0.1);
            color: var(--danger);
        }
        
        .badge-accent {
            background-color: rgba(139, 92, 246, 0.1);
            color: var(--accent);
        }
        
        .grid-cols-2 {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1.5rem;
        }
        
        @media (max-width: 768px) {
            .grid-cols-2 {
                grid-template-columns: 1fr;
            }
            
            .detail-panel {
                width: 100%;
            }
        }
        
        .loading {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            width: 100%;
            position: fixed;
            top: 0;
            left: 0;
            background: rgba(255, 255, 255, 0.8);
            z-index: 9999;
        }
        
        .spinner {
            width: 50px;
            height: 50px;
            border: 5px solid rgba(59, 130, 246, 0.2);
            border-radius: 50%;
            border-top-color: var(--primary);
            animation: spin 1s ease-in-out infinite;
        }
        
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
    </style>
</head>
<body>
    <div class="loading">
        <div class="spinner"></div>
    </div>

    <div class="container">
        <div class="hero">
            <h1 class="hero-title">AI高考作文分析可视化报告</h1>
            <p class="hero-subtitle">基于人工智能技术的深度分析与个性化反馈</p>
            <div class="flex items-center gap-2">
                <span class="badge badge-primary"><i class="fas fa-user-graduate mr-1"></i> 考生ID: STU2023001</span>
                <span class="badge badge-success"><i class="fas fa-book mr-1"></i> 语文科目</span>
                <span class="badge badge-accent"><i class="fas fa-clock mr-1"></i> 分析时间: 2023-06-08</span>
            </div>
        </div>

        <div class="grid-cols-2">
            <div>
                <div class="card">
                    <h2 class="card-title"><i class="fas fa-chart-radar text-blue-500"></i> 核心评分雷达图</h2>
                    <div id="scoreChart" class="chart-container"></div>
                    <div class="flex justify-between text-sm text-gray-600">
                        <div>评分范围: 0-100分</div>
                        <div>平均分: <span class="font-bold">84.6</span></div>
                    </div>
                </div>

                <div class="card">
                    <h2 class="card-title"><i class="fas fa-cloud text-indigo-500"></i> 词汇特征分析</h2>
                    <div id="wordCloud" class="chart-container"></div>
                    <div class="mt-4 grid grid-cols-2 gap-4">
                        <div class="bg-blue-50 p-3 rounded-lg">
                            <div class="text-sm text-blue-600">词汇丰富度</div>
                            <div class="text-2xl font-bold text-blue-800">78/100</div>
                            <div class="text-xs text-blue-500">高于平均水平</div>
                        </div>
                        <div class="bg-purple-50 p-3 rounded-lg">
                            <div class="text-sm text-purple-600">句子复杂度</div>
                            <div class="text-2xl font-bold text-purple-800">65/100</div>
                            <div class="text-xs text-purple-500">中等偏上</div>
                        </div>
                    </div>
                </div>

                <div class="card">
                    <h2 class="card-title"><i class="fas fa-heart text-pink-500"></i> 情感色彩分析</h2>
                    <div class="grid-cols-2">
                        <div>
                            <div id="emotionTrend" class="chart-container" style="height: 200px;"></div>
                            <div class="text-center text-sm text-gray-600">段落情感趋势</div>
                        </div>
                        <div>
                            <div id="emotionPie" class="chart-container" style="height: 200px;"></div>
                            <div class="text-center text-sm text-gray-600">情感分布比例</div>
                        </div>
                    </div>
                    <div class="mt-4 text-sm">
                        <p>整体情感倾向: <span class="font-bold text-green-600">积极向上</span> (72% 积极, 18% 中性, 10% 消极)</p>
                    </div>
                </div>
            </div>

            <div>
                <div class="card">
                    <h2 class="card-title"><i class="fas fa-file-alt text-teal-500"></i> 作文原文与分析</h2>
                    <div class="essay-content" id="essayContent">
                        <!-- 动态插入作文内容 -->
                    </div>
                </div>

                <div class="card">
                    <h2 class="card-title"><i class="fas fa-lightbulb text-amber-500"></i> AI批改建议</h2>
                    <div class="space-y-3">
                        <div class="suggestion-item">
                            <i class="fas fa-pen-fancy text-blue-500"></i>
                            <div>
                                <div class="font-medium">语言表达优化</div>
                                <div class="text-sm text-gray-600">建议增加一些修辞手法，如比喻、排比等，使语言更加生动形象。"独立寒尘"可改为"独处寒冷尘世"表达更为清晰。</div>
                            </div>
                        </div>
                        <div class="suggestion-item">
                            <i class="fas fa-project-diagram text-purple-500"></i>
                            <div>
                                <div class="font-medium">结构优化建议</div>
                                <div class="text-sm text-gray-600">第三段与第四段之间存在逻辑跳跃，建议添加过渡句使论证更加连贯。可以考虑使用"然而""不仅如此"等连接词。</div>
                            </div>
                        </div>
                        <div class="suggestion-item">
                            <i class="fas fa-book text-teal-500"></i>
                            <div>
                                <div class="font-medium">内容充实建议</div>
                                <div class="text-sm text-gray-600">文中对"科技与人文"的讨论可以引用具体事例来支撑观点，如数字人文项目或AI创作的诗歌等，增强说服力。</div>
                            </div>
                        </div>
                        <div class="suggestion-item">
                            <i class="fas fa-spell-check text-red-500"></i>
                            <div>
                                <div class="font-medium">语法与用词</div>
                                <div class="text-sm text-gray-600">发现3处标点使用不规范和2处词语搭配不当。如"科技创新飞速发展的今天，"应为"在科技创新飞速发展的今天，"。</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="card">
            <h2 class="card-title"><i class="fas fa-sitemap text-indigo-500"></i> 论证逻辑分析</h2>
            <div id="logicFlow" class="mermaid">
                graph TD
                    A[第一段: 引出主题<br>科技发展现状] -->|提出问题| B[第二段: 科技创新的意义]
                    B -->|递进| C[第三段: 人文精神的重要性]
                    C -->|转折| D[第四段: 科技与人文的关系]
                    D -->|总结| E[第五段: 呼吁平衡发展]
            </div>
        </div>
    </div>

    <div class="detail-panel" id="detailPanel">
        <div class="detail-close" id="detailClose"><i class="fas fa-times"></i></div>
        <div id="detailContent">
            <!-- 动态插入详细内容 -->
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 模拟加载延迟
            setTimeout(function() {
                document.querySelector('.loading').style.display = 'none';
                initPage();
            }, 1500);
            
            // 关闭详情面板
            document.getElementById('detailClose').addEventListener('click', function() {
                document.getElementById('detailPanel').classList.remove('active');
            });
        });

        function initPage() {
            // 模拟数据
            const essayData = {
                content: `在科技创新飞速发展的今天，我们生活在一个日新月异的时代。科技如同一把双刃剑，在带来便利的同时，也引发了人们对人文精神缺失的担忧。如何平衡科技发展与人文关怀，成为当代社会亟待解决的问题。

科技创新的意义不言而喻。从工业革命到信息时代，科技极大地提升了人类的生活质量。人工智能、大数据、量子计算等前沿技术正以前所未有的速度改变着我们的生活方式。独立寒尘，科技让世界变得更加紧密相连，让知识的获取变得触手可及。

然而，在追逐科技进步的过程中，我们不应忽视人文精神的重要性。文学、艺术、哲学等人文领域是人类智慧的结晶，它们滋养着我们的心灵，塑造着我们的价值观。没有人文精神的科技发展，就像是失去了灵魂的躯壳，徒有其表。

科技与人文并非对立，而是相辅相成的关系。优秀的科技产品往往蕴含着设计者的人文思考，而人文作品的创作也越来越多地借助科技手段。两者相互促进，共同推动人类文明的进步。

总之，在科技日新月异的今天，我们更需要坚守人文精神的阵地。只有当科技与人文比翼齐飞，人类才能迎来真正意义上的全面发展。让我们携手共建一个既有科技高度，又有人文温度的和谐世界。`,
                scores: {
                    theme: 86,
                    logic: 82,
                    language: 78,
                    emotion: 88,
                    innovation: 75
                },
                emotions: {
                    trend: [85, 80, 75, 88, 90], // 每段情感得分
                    distribution: [
                        { value: 72, name: '积极' },
                        { value: 18, name: '中性' },
                        { value: 10, name: '消极' }
                    ]
                },
                highlights: [
                    {
                        id: 1,
                        type: 'good',
                        text: '科技如同一把双刃剑，在带来便利的同时，也引发了人们对人文精神缺失的担忧',
                        start_index: 31,
                        end_index: 79,
                        category: '主题句',
                        suggestion: '这个比喻非常贴切，准确表达了科技的双重性',
                        detail: '此处使用了"双刃剑"的比喻，形象生动地揭示了科技发展的两面性，为后文的讨论奠定了良好的基础。建议在后续写作中保持这种形象化的表达方式。'
                    },
                    {
                        id: 2,
                        type: 'weak',
                        text: '独立寒尘',
                        start_index: 189,
                        end_index: 193,
                        category: '表达模糊',
                        suggestion: '改为"独处寒冷尘世"表达更为清晰',
                        detail: '"独立寒尘"表达较为模糊，读者可能难以理解确切含义。可以改为更明确的表达如"独处寒冷尘世"或"在充满挑战的环境中"，使意思更加清晰。'
                    },
                    {
                        id: 3,
                        type: 'good',
                        text: '没有人文精神的科技发展，就像是失去了灵魂的躯壳，徒有其表',
                        start_index: 305,
                        end_index: 352,
                        category: '精彩比喻',
                        suggestion: '这个比喻非常生动，可以继续保持',
                        detail: '此处将科技比作"躯壳"，人文精神比作"灵魂"，形象地揭示了两者的关系。这种类比手法使抽象概念具象化，增强了文章的说服力和感染力。'
                    },
                    {
                        id: 4,
                        type: 'error',
                        text: '科技创新飞速发展的今天，',
                        start_index: 0,
                        end_index: 15,
                        category: '语法错误',
                        suggestion: '改为"在科技创新飞速发展的今天，"',
                        detail: '此处缺少介词"在"，导致句子结构不完整。应该添加"在"字，使时间状语完整。这是常见的主语缺失错误，需要注意。'
                    },
                    {
                        id: 5,
                        type: 'rhetoric',
                        text: '科技与人文比翼齐飞',
                        start_index: 478,
                        end_index: 491,
                        category: '修辞手法',
                        suggestion: '这个比喻非常恰当，可以继续保持',
                        detail: '此处使用了"比翼齐飞"的成语，形象地表达了科技与人文协同发展的理想状态。这种修辞手法增强了语言的表现力，使观点更加生动。'
                    }
                ],
                wordCloudData: [
                    { name: '科技', value: 45, emotion: 'positive' },
                    { name: '人文', value: 38, emotion: 'positive' },
                    { name: '发展', value: 32, emotion: 'neutral' },
                    { name: '精神', value: 25, emotion: 'positive' },
                    { name: '创新', value: 22, emotion: 'positive' },
                    { name: '人类', value: 18, emotion: 'neutral' },
                    { name: '世界', value: 15, emotion: 'neutral' },
                    { name: '意义', value: 12, emotion: 'positive' },
                    { name: '进步', value: 10, emotion: 'positive' },
                    { name: '关系', value: 8, emotion: 'neutral' },
                    { name: '价值观', value: 7, emotion: 'positive' },
                    { name: '灵魂', value: 6, emotion: 'positive' }
                ]
            };

            // 渲染作文内容并添加高亮
            const essayContent = document.getElementById('essayContent');
            let currentPosition = 0;
            let contentWithHighlights = '';
            
            // 按照起始位置排序高亮部分
            const sortedHighlights = [...essayData.highlights].sort((a, b) => a.start_index - b.start_index);
            
            sortedHighlights.forEach(highlight => {
                // 添加高亮前的文本
                contentWithHighlights += essayData.content.substring(currentPosition, highlight.start_index);
                
                // 添加高亮文本
                const highlightClass = `highlight-${highlight.type}`;
                const tooltip = `data-id="${highlight.id}"`;
                contentWithHighlights += `<span class="${highlightClass}" ${tooltip}>${highlight.text}</span>`;
                
                currentPosition = highlight.end_index;
            });
            
            // 添加剩余文本
            contentWithHighlights += essayData.content.substring(currentPosition);
            essayContent.innerHTML = contentWithHighlights;
            
            // 为高亮部分添加点击事件
            document.querySelectorAll('.highlight-good, .highlight-weak, .highlight-error, .highlight-rhetoric').forEach(el => {
                el.addEventListener('click', function() {
                    const id = this.getAttribute('data-id');
                    const highlight = essayData.highlights.find(h => h.id == id);
                    
                    if (highlight) {
                        const detailContent = document.getElementById('detailContent');
                        let detailHtml = `
                            <h3 class="text-xl font-bold mb-4">详细分析</h3>
                            <div class="mb-4 p-3 rounded-lg ${highlight.type === 'good' ? 'bg-green-50 border-l-4 border-green-500' : 
                               highlight.type === 'weak' ? 'bg-yellow-50 border-l-4 border-yellow-500' :
                               highlight.type === 'error' ? 'bg-red-50 border-l-4 border-red-500' : 'bg-purple-50 border-l-4 border-purple-500'}">
                                <p class="font-medium">${highlight.text}</p>
                            </div>
                            <div class="mb-4">
                                <span class="badge ${highlight.type === 'good' ? 'badge-success' : 
                                    highlight.type === 'weak' ? 'badge-warning' : 
                                    highlight.type === 'error' ? 'badge-danger' : 'badge-accent'}">
                                    ${highlight.type === 'good' ? '优秀句段' : 
                                      highlight.type === 'weak' ? '弱点句段' : 
                                      highlight.type === 'error' ? '语法错误' : '修辞手法'}
                                </span>
                                <span class="badge badge-primary ml-2">${highlight.category}</span>
                            </div>
                            <div class="mb-4">
                                <h4 class="font-medium text-gray-700 mb-2">AI建议:</h4>
                                <p>${highlight.suggestion}</p>
                            </div>
                            <div>
                                <h4 class="font-medium text-gray-700 mb-2">详细说明:</h4>
                                <p>${highlight.detail}</p>
                            </div>
                        `;
                        
                        detailContent.innerHTML = detailHtml;
                        document.getElementById('detailPanel').classList.add('active');
                    }
                });
            });

            // 初始化雷达图
            const scoreChart = echarts.init(document.getElementById('scoreChart'));
            const scoreOption = {
                title: {
                    text: '作文多维评分',
                    left: 'center',
                    textStyle: {
                        fontSize: 16,
                        fontWeight: 'bold'
                    }
                },
                tooltip: {},
                radar: {
                    indicator: [
                        { name: '主题切合度', max: 100 },
                        { name: '论证逻辑', max: 100 },
                        { name: '语言表达', max: 100 },
                        { name: '情感色彩', max: 100 },
                        { name: '创新性', max: 100 }
                    ],
                    radius: '65%',
                    splitNumber: 5,
                    axisName: {
                        color: '#333',
                        fontSize: 12
                    },
                    splitArea: {
                        areaStyle: {
                            color: ['rgba(59, 130, 246, 0.1)', 'rgba(59, 130, 246, 0.2)', 'rgba(59, 130, 246, 0.3)', 'rgba(59, 130, 246, 0.4)', 'rgba(59, 130, 246, 0.5)'],
                            shadowColor: 'rgba(0, 0, 0, 0.1)',
                            shadowBlur: 10
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(59, 130, 246, 0.5)'
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(59, 130, 246, 0.5)'
                        }
                    }
                },
                series: [{
                    name: '评分',
                    type: 'radar',
                    data: [{
                        value: [essayData.scores.theme, essayData.scores.logic, essayData.scores.language, essayData.scores.emotion, essayData.scores.innovation],
                        name: '当前作文',
                        areaStyle: {
                            color: 'rgba(59, 130, 246, 0.4)'
                        },
                        lineStyle: {
                            width: 2,
                            color: '#3b82f6'
                        },
                        symbolSize: 6,
                        label: {
                            show: true,
                            formatter: function(params) {
                                return params.value;
                            }
                        }
                    }]
                }]
            };
            scoreChart.setOption(scoreOption);

            // 初始化词云
            const wordCloudChart = echarts.init(document.getElementById('wordCloud'));
            const wordCloudOption = {
                title: {
                    text: '高频词汇词云',
                    left: 'center',
                    textStyle: {
                        fontSize: 16,
                        fontWeight: 'bold'
                    }
                },
                tooltip: {},
                series: [{
                    type: 'wordCloud',
                    shape: 'circle',
                    left: 'center',
                    top: 'center',
                    width: '90%',
                    height: '90%',
                    right: null,
                    bottom: null,
                    sizeRange: [12, 40],
                    rotationRange: [-45, 45],
                    rotationStep: 15,
                    gridSize: 8,
                    drawOutOfBound: false,
                    textStyle: {
                        fontFamily: 'Noto Sans SC',
                        fontWeight: 'bold',
                        color: function () {
                            return 'rgb(' + [
                                Math.round(Math.random() * 160 + 95),
                                Math.round(Math.random() * 160 + 95),
                                Math.round(Math.random() * 160 + 95)
                            ].join(',') + ')';
                        }
                    },
                    emphasis: {
                        focus: 'self',
                        textStyle: {
                            shadowBlur: 10,
                            shadowColor: '#333'
                        }
                    },
                    data: essayData.wordCloudData.map(item => {
                        return {
                            name: item.name,
                            value: item.value,
                            textStyle: {
                                color: item.emotion === 'positive' ? '#10b981' : 
                                       item.emotion === 'negative' ? '#ef4444' : '#6b7280'
                            }
                        };
                    })
                }]
            };
            wordCloudChart.setOption(wordCloudOption);

            // 初始化情感趋势图
            const emotionTrendChart = echarts.init(document.getElementById('emotionTrend'));
            const emotionTrendOption = {
                tooltip: {
                    trigger: 'axis',
                    formatter: '段落{params[0].dataIndex + 1}: {params[0].value}分'
                },
                xAxis: {
                    type: 'category',
                    data: ['1段', '2段', '3段', '4段', '5段'],
                    axisLine: {
                        lineStyle: {
                            color: '#9ca3af'
                        }
                    },
                    axisLabel: {
                        color: '#6b7280'
                    }
                },
                yAxis: {
                    type: 'value',
                    min: 50,
                    max: 100,
                    axisLine: {
                        show: false
                    },
                    axisLabel: {
                        color: '#6b7280'
                    },
                    splitLine: {
                        lineStyle: {
                            color: '#e5e7eb'
                        }
                    }
                },
                series: [{
                    data: essayData.emotions.trend,
                    type: 'line',
                    smooth: true,
                    symbol: 'circle',
                    symbolSize: 8,
                    lineStyle: {
                        width: 3,
                        color: '#8b5cf6'
                    },
                    itemStyle: {
                        color: '#8b5cf6',
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: 'rgba(139, 92, 246, 0.3)' },
                            { offset: 1, color: 'rgba(139, 92, 246, 0.1)' }
                        ])
                    }
                }]
            };
            emotionTrendChart.setOption(emotionTrendOption);

            // 初始化情感饼图
            const emotionPieChart = echarts.init(document.getElementById('emotionPie'));
            const emotionPieOption = {
                tooltip: {
                    trigger: 'item',
                    formatter: '{b}: {c}%'
                },
                series: [{
                    type: 'pie',
                    radius: ['50%', '70%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderRadius: 10,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '16',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: essayData.emotions.distribution.map(item => {
                        return {
                            value: item.value,
                            name: item.name,
                            itemStyle: {
                                color: item.name === '积极' ? '#10b981' : 
                                       item.name === '消极' ? '#ef4444' : '#f59e0b'
                            }
                        };
                    })
                }]
            };
            emotionPieChart.setOption(emotionPieOption);

            // 初始化Mermaid图表
            mermaid.initialize({
                startOnLoad: true,
                theme: 'default',
                flowchart: {
                    useMaxWidth: true,
                    htmlLabels: true,
                    curve: 'basis'
                }
            });
        }
    </script>
</body>
</html>